@charset "utf-8";
*{ margin: 0; padding: 0}

/*主体背景*/
body{ background-image: url("../img/201908261119001.jpg"); background-repeat: no-repeat; background-size: cover; }

/*总体长宽*/
div.all{ width: 920px; margin: 50px auto; }

/*上部分长宽*/
div.top { width: 920px; height: 56px; }

/*上部分左侧*/
div.topLeft { position: absolute; width: 580px; height: 56px; background-color: #1E93EC; border-radius: 4px 0 0 0;}

/*qq头像*/
div.QQimg{ position: absolute; width: 40px; height: 40px; top: 8px; left: 10px; background-image: url("../img/202003011703001.jpg"); background-repeat: no-repeat; background-size: cover; border-radius: 40px; }

/*搜索框*/
div.search{ position: absolute; width: 94px; height: 20px; top: 18px; left: 77px; border: 1px solid #A6D5FA; border-radius: 10px; }

div.circle{ position: absolute; width: 10px; height: 10px; top: 4px; left: 8px; border: 1.3px solid #A6D5FA; border-radius: 11px; }

div.circle2{ position: absolute; width: 3px; height: 1.3px; top: 15px; left: 19px; background-color: #A6D5FA; transform: rotate(45deg); }

/*左边三角*/
div.squareLeft { position: absolute; width: 0px; height: 0px; border-left: 28px solid #1E93EC; border-bottom: 28px solid #1E93EC; border-right: 28px solid transparent; border-top: 28px solid transparent; margin-left: 580px; z-index: 3; }
/*上面三角*/
div.squareTop{ position: absolute; width: 100px; height: 56px; margin-left: 580px; background-color: #3E58C9; z-index: 1; }

/*右边三角*/
div.squareRight { position: absolute; width: 0px; height: 0px; border-left: 28px solid transparent; border-top: 28px solid transparent; border-right: 28px solid #3448A1; border-bottom: 28px solid #3448A1; margin-left: 596px; z-index: 2; }
/*上部右边*/
div.topRight { position: absolute; width: 272px; height: 56px; margin-left: 648px; background-color: #3448A1; border-radius: 0 4px 0 0; z-index: 2; }


/*叉叉*/
div.off1{ position: absolute; width: 16px; height: 1.2px; top: 27px; right: 12px; background-color: #7F8CC3; transform: rotateZ(45deg);  z-index: 3;  }

div.off2{ position: absolute; width: 16px; height: 1.2px; top: 27px;right: 12px; background-color: #7F8CC3; transform: rotateZ(-45deg); z-index: 3;  }

/*最大化*/
div.max{ position: absolute; width: 10px; height: 10px; top: 22px; right: 38px; border: 1.3px solid #7F8CC3; border-radius: 2px; z-index: 3; }

/*最小化*/
div.min{ position: absolute; width: 12px; height: 1.6px; top: 27px; right: 64px; background-color: #7F8CC3; z-index: 3; }

/*设置*/
div.setting{ position: absolute; top: 23px;right: 90px; z-index: 3; }

div.set1{ position: absolute; width: 10px; height: 1.6px; top: -1px; right: 0px; background-color: #7F8CC3; }

div.set2{ position: absolute; width: 10px; height: 1.6px; top: 3.6px; right: 0px; background-color: #7F8CC3; }

div.set3{ position: absolute; width: 10px; height: 1.6px; top: 8.6px; right: 0px; background-color: #7F8CC3; }

/*下部分*/
div.bot{ position: absolute; width: 920px; height: 544px; } 

/*下部分左侧*/
div.botLeft{ position: absolute; width: 194px; height: 544px; background-color: #FAFAFA; border-radius: 0 0 0 4px; }
/*下部分左侧上部分*/
div.botLeftTop{ position: absolute; width: 194px; height: 37px; border-top: 4px solid #FAFAFA; border-bottom: 1.1px solid #ECECEC; }
/*待办*/
div.leftTopCircle{ position: absolute; width: 14px; height: 14px; top: 8px; left: 12px; border: 1.4px solid #727272;/* //#5B5B5B;*/ border-radius: 14px; z-index: 1; }

div.leftTopCircle2{ position: absolute; width: 5px; height: 1.4px; top: 17px; left: 17px; background-color: #727272; transform: rotate(40deg); z-index: 3; }

div.leftTopCircle3{ position: absolute; width: 7px; height: 7px; top: 9px; left: 24px; background-color: #FAFAFA; transform: rotate(-45deg); z-index: 2; }

div.leftTopCircle4{ position: absolute; width: 11px; height: 1.4px; top: 14px; left: 19px; background-color: #727272; transform: rotate(-45deg); z-index: 3; }

div p.botLeft{ position: absolute; min-width: 10px; top: 7px; left: 38px; font-size: 14px; }

/*下部分左侧下部分*/
div.botLeftBot{ width: 194px; height: 502px; margin-top: 42.1px;border-radius: 0 0 0 4px; overflow: hidden; }

/*联系人*/
div.message{ width: 194px; height: 60px; background-color: #FAFAFA; }

div.botLeftBot:hover{ overflow: auto; }

div.message:hover{ background-color: #EBEBEC; }
div.message:focus, div.message:active{ background-color: #EBEBEC; }

/*qq头像*/
div.QQFrriendsImg{ position: relative; width: 40px; height: 40px; top: 8px; left: 12px; background-image: url("../img/20180515171635.png"); background-repeat: no-repeat; background-size: cover; border-radius: 40px; }

div.message p{ position: relative; white-space: nowrap; max-width: 110px; top: -32px; left: 62px; font-size: 15px; font-weight: 530; overflow: hidden; }

div.message p + p{ position: relative; max-width: 110px; top: -30px; left: 62px; font-size: 12px; font-weight: 400; color: #9D9D9D; text-overflow:ellipsis; overflow:hidden;  }

div.botRight{ position: absolute; width: 726px; height: 544px; left: 194px; border-radius: 0 0 4px 0; }

div.botRightTop{ position: absolute; background-color: #FFFFFF; width: 726px; height: 41px; border-bottom: 1.1px solid #ECECEC; }

div.botRightTop p.name{ position: relative; display: inline-block; max-width: 200px; font-size: 18px; top: 7px; left: 14px; font-weight: 500; }

p.name:hover { cursor: pointer; border-bottom: 1.5px solid #000; } 

div.four{ position: absolute; width: 200px; height: 41px; right: 0px; top: 0px; }

div.four p{ position: relative; display: inline-block; width: 39px; font-size: 14px; left: 0px; top: 8px; font-weight: 500; color: #9A9A9A; }

div.four p:hover{ cursor: default; color: #000; }

div.botRightMid{ position: absolute; width: 726px; height: 373px; background-color: #FFF; top: 42px; border-bottom: 1.1px solid #ECECEC; }

p.keshanyaoLeft{ display: inline-block; color: #0B0BFF; font-size: 12px; margin-left: 12px; background-color: #FFF; }

p.keshanyaoLeft + p{ display: inline-block; color: #51BCF0; font-size: 12px; height: 13px; background-color: #FFF; border-bottom: 1px solid #0B0BFF; }

p.keshanyaoRight{ display: inline-block; color: #0B0BFF; font-size: 12px; background-color: #FFF; }

div.img3{ position: relative; width: 220px; height: 260px; /*background-color:#000;*/ top: 2px; left: 30px; background-image: url("../img/202003011559001.jpg"); background-repeat: no-repeat; background-size: cover; border: 3px solid #D7D7D7; border-radius: 8px; }

div.img4{ position: relative; width: 365px; height: 76px; top: 10px; left: 30px; background-image: url("../img/202003011620001.jpg"); background-repeat: no-repeat; background-size: cover; }


div.botRightBot{ position: absolute; width: 726px; height: 128px; top: 416px; background-color: #FFF; border-radius: 0 0 4px 0; }

div.img2{ position: relative; width: 310px; height: 30px; /*background-color:#000;*/ top: -1px; left: -1px; background-image: url("../img/202003011514001.png"); background-repeat: no-repeat; background-size: cover; } 

textarea{ position: relative; width: 670px; height: 88px; top: 10px; left: 7px; background: #FFF; border: none; outline: none; font-size:18px; font-family: 仿宋; font-weight: bold; color: #0B0BFF; resize: none; }

p.hisMsg{ position: absolute; display: inline-block; top: 14px; right: 32px; color: #939393; background-color: #FFF; font-size: 12px; }

p.sendBtn{ position: absolute; display: inline-block; padding: 4px 7px 4px 5px; top: 94px; right: 16px; color: #FFF; background-color: #0188FB; font-size: 12px; border-radius: 2px; } 

/*滚动条样式*/
::-webkit-scrollbar-track-piece { /*滚动条的凹槽*/ background: transparent;  outline: none; border: none; z-index: 1; }

::-webkit-scrollbar-thumb:vertical{/*垂直滚动条的样式*/ width: 5px; height:30px; background-color:#C8C8C8; border-radius:5px; -webkit-border-radius:5px; opacity: 0.5; }
  
::-webkit-scrollbar-thumb:hover{/*滚动条的hover样式*/ height:30px; background-color:#969696; border-radius:5px; -webkit-border-radius:5px; opacity: 0.5; }
  
::-webkit-scrollbar-thumb:horizontal{/*水平滚动条的样式*/ width:5px; background-color:#CCCCCC; border-radius:6px; -webkit-border-radius:6px;  }

div::-webkit-scrollbar{ width:8px;/*滚动条的宽度*/ }